<template>
   <div class="login-container" teleport="body">
      <h2>嗨购商城</h2>
       <div class="login-box">
       <el-form :model="admin" label-width="120px">
           <el-form-item label="姓名">
               <el-input  v-model="admin.adminname" />         
           </el-form-item>
           <el-form-item label="密码">
               <el-input type="password" v-model="admin.password" />
           </el-form-item>
           <el-form-item>
            <el-button :plain="true" @click="loginCheck">登录</el-button>
            <el-button @click="fun">清空111</el-button>
           </el-form-item>
       </el-form>
       </div>
   </div>
 </template>
   
 <script setup lang="ts">
 import 'element-plus/dist/index.css';
 import { ElMessage } from 'element-plus';
 import { reactive } from 'vue';
 import service from '../utils/service';
 import {useRouter} from "vue-router";
 
 const $router = useRouter();
 interface IAdmin {
   adminname: string,
   password: string,
  
 }
 
 // 当前管理员的数据
 const admin = reactive<IAdmin>({
   adminname: "admin",
   password: "123456",
  
 })
 const loginCheck=()=>{

service({
    url:"/admin/login",
    method:"post",
    data:admin
})
.then(res=>{
    switch(res.data.code){
        case "200":{
            ElMessage({
                message:"登录成功！",
                type:"success"
            });
            sessionStorage.setItem("username",admin.adminname);
            // 存储token
            sessionStorage.setItem("token",res.data.data.token);
            sessionStorage.setItem("grants",JSON.stringify(res.data.data.checkedkeys));
            $router.push("/Admin");
            break;
        }
        case "10003":{
            ElMessage({
                message:"密码错误！",
                type:"error"
            });
            break;
        }
        case "10005":{
            ElMessage({
                message:"未注册！",
                type:"error"
            });
            break;
        }
        default:{
            ElMessage({
            message: '请输入用户名密码',
            type: 'warning',
        })
        }
    }
})
}
const fun =()=>{
    admin.adminname= ""
    admin.password=""
}
 </script>
   
 <style scoped>
 .login-box {
    background-color: #fff;
    width: 450px;
    border-radius: 10px;
    padding: 50px 30px 30px;
}
.login-container {
    /* width: 450px; */
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: blue;
}
.login-container h2 {
    color: #fff;
    text-align: center;
}

 </style>